<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
			.box{
				width: 500px;
				height: 25px;
				margin: 100px auto;
				font-size: 16px;
				line-height: 25px;
				/*border: 1px solid red;*/
				position: relative;
				overflow: hidden;
			}
			a{
				display: inline-block;
				line-height: 25px;
				text-decoration: none;
				color: #666;
			}
			ul{
				position: absolute;
				top: 0px;
				left: 40px;
				width: 600px;
				height: 75px;
				float: left;
			}
			li{
				width: 500px;
				height: 25px;
				list-style: none;
			}
			a:hover{
				color: #B76F3B;
				text-decoration: underline;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var n=0;
				
				function fn(){
					n++;
				if(n==3){
					$('ul').css({top:"0px"});
					n=1;	
				}
				var top=n*-25;

				$('ul').stop().animate({'top':top+'px'},300);
				}

				timer=setInterval(fn,1000);
				$('li').hover(function() {
					clearInterval(timer);
				}, function() {
					timer=setInterval(fn,1000);
				});
			})
		</script>
	</head>
	<body>
		<div class="box">
			热点:
			<ul>
				<li class="bt">
					<a href="">渐入秋季的护肤单品 补水是首要任 </a>
					<a href="">【宝贝驾到】秋冬驾临小伙伴</a>
				</li>
				<li class="bt">
					<a href="">涨价到1500元每位的然寿司 </a>
					<a href="">【抗衰老】好肌肤养成记 真爱单品</a>
				</li>
				<li class="bt">
					<a href="">渐入秋季的护肤单品 补水是首要任 </a>
					<a href="">【宝贝驾到】秋冬驾临小伙伴</a>
				</li>
			</ul>
		</div>
	</body>
</html>
